<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>简易富文本编辑器.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <style type="text/css">
        #editor {width:600px;height:200px;border:1px solid #ccc;
        }
        button {margin:1px;border:1px solid #aaa;background:#ffe;cursor:pointer;overflow:hidden;}
        button:hover {background:#ccc;border:1px solid #00f;}
    </style>
</head>

<body>
<button id="btn1"></button>
<button id="btn2"></button>
<button id="btn3"></button>
<button id="btn4"></button>
<div id="editor">
    Click to Editor...
</div>
<input id="printContent" type="button" value="打印编辑器内容">
<script type="text/javascript">
    initEditor();

    //初始化
    function initEditor() {
        openOrCloseEditor("editor", "true");//开启元素编辑
        bindBtnCommand();//给样式按钮绑定命令
    }

    /**
     *
     * 功能： 开启元素编辑功能
     * 输入： el：编辑器ID; operate：Boolean值，表示启动还是关闭
     */
    function openOrCloseEditor(el, operate) {
        var editor = document.getElementById(el);
        editor.contentEditable = operate;
    }

    //按钮绑定命令
    function bindBtnCommand() {
        var btns = document.getElementsByTagName("button"),
            btnConfigs = "backcolor|#f00|设置背景色 bold|null|字体加粗 indent|null|缩进 fontName|微软雅黑|转换字体".split(" "),
            len = btnConfigs.length;
        for(var i = 0, btnConfig; btnConfig = btnConfigs[i]; i++) {
            (function(btnConfig, btn) {
                var msg = btnConfig.split("|"),
                    lab = msg[0],
                    value = msg[1],
                    title = msg[2];
                btn.innerHTML = lab;
                btn.title = title;
                btn.onclick = function(e) {
                    document.execCommand(lab, false, value);
                }
            })(btnConfig, btns[i]);
        }
    }

    //获取编辑器内嵌内容
    function getContent(el) {
        var editor = document.getElementById(el);
        return editor.innerHTML;
    }

    //打印按钮绑定触发事件
    document.getElementById("printContent").onclick = function(e) {
        var content = getContent("editor");
        document.write(content);
    };
</script>
</body>
</html>